<template>
    <div class="info-collect">
        <Crumb name="Sparepart Inventory"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="根据配件编号查询"
                        prefix-icon="el-icon-search"
                > </el-input>
                <el-button
                        size="small"
                        type="primary"
                        @click="search"
                > 搜索
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="partList"
                        border
                        row-key="id"
                        @filter-change="handleFilterChange"
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand" label="total" width="80">
                        <template slot-scope="part">
                            <div><part-detail :partDetail="part.row"></part-detail></div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="partsNumber"
                            label="配件编号"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="denomination"
                            label="名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="designation"
                            label="名称（英文）"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="systemName"
                            :filters="uniSystem"
                            label="系统"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="hostNumber"
                            :filters="uniUnit"
                            label="适配主机"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="quantity"
                            label="库存"
                    >
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"> </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import partStockDetail from '@/components/part/partStockDetail'
    import {getUniSystem,getUniUnit} from "../../api";
    import {getInventory} from "../../api/contract";
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import {baseURL} from "../../util";
    import partDetail from '../../components/part/partDetail'
    export default {
        name: "part-list",
        mixins: [mixins],
        data() {
            return {
                imageList: [],
                uniSystem:[],
                uniUnit:[],
                partList:[],
                filterOption:[],
                partStockInList: [],
                partStockOutList: [],
                part: [],
                ruleForm: {},
                rules: {},
                url: baseURL + '/file/uploadFileCDN',
                key: '',
                key1: '',
                dialogVisible: false,
                stockVisible: false,
                differentList:[],
                notExistList:[],
                showDifferent:false,
                stock: {
                    partId: '',
                    quantity: ''
                }
            }
        },
        created() {

            this.getInventory()
            this.getUniSystem()
            this.getUniUnit()
        },
        filters: {
            money(num) {
                return num && num.toString()
                    .replace(/^\d+/g, (m) => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
            }
        },
        methods: {
            search(){
                this.pageNum = 1;
                this.getInventory()
            },
            changePage(page){
              this.pageNum = page;
              this.getInventory();
            },
            async getInventory(){
                const {status,data,msg} = await getInventory({pageSize:50,pageNum:this.pageNum,warehouse:1,partsNum:this.key});
                if (status === ERROR_OK) {
                    this.partList = data.list;
                    this.total = data.total;

                } else {
                    this.partList = [];
                    this.$notify.error(msg)
                }
            },
            handleFilterChange(filter){
                Object.keys(filter).forEach((key)=>{
                    this.filterOption = filter[key]
                });
            },
            async getUniUnit(){
                const {status,data} = await getUniUnit();
                if(status === ERROR_OK) {

                    this.uniUnit = data.map(item=>{
                        return {
                            text:item,
                            value:item
                        }
                    });
                }
            },
            async getUniSystem(){
                const {status,data} = await getUniSystem();
                if(status === ERROR_OK) {
                    this.uniSystem =  data.map(item=>{
                        return {
                            text:item,
                            value:item
                        }
                    });
                }
            }
        },
        components: {
            Crumb, Search, partStockDetail,partDetail
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        label{
            display: inline-block;
            line-height: 30px;
            padding: 0 20px;
            border-radius: 3px;
            cursor: pointer;
            background: #409eff;
            height: 30px;
            color: white;
            text-align: center;
            font-size: 14px;
            margin-left: 20px;
            &:hover{
                background: #6495ed;
            }
        }
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>